<template>
  <div class="card">
    <!-- <div class="card-content" :class="todo.completed ? 'over' : ''"> -->
    <!-- <div class="card-content" :class="{over: todo.completed}"> -->
    <div :class="['card-content', {over: todo.completed}]">
      <div class="content">
        {{ todo.title }} - {{ todo.completed ? '已' : '未' }}完成
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item" @click="handleToggle">标记为{{ todo.completed ? '未' : '已' }}完成</a>
      <a href="#" class="card-footer-item" @click="handleRemove">删除</a>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  data() {
    return {}
  },
  props: ['todo'],
  methods: {
    handleToggle() {
      // 修改状态，需要向祖先节点传递数据
      // 触发在全局 event-bus 中注册的 toggle 事件
      this.$bus.$emit('toggle', this.todo.id)
    },
    handleRemove() {
      // 触发在全局 event-bus 中注册的 remove 事件
      this.$bus.$emit('remove', this.todo.id)
    }
  }
}
</script>

<style lang='scss' scoped>
  .over {
    background: #ccc;
    text-decoration: line-through;
  }
</style>
